<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <th:block th:include="include :: header('左右互选组件')" />
    <th:block th:include="include :: bootstrap-duallistbox-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">

                <div class="ibox-content">


                    <form id="form" action="#" class="wizard-big">
                        <select class="form-control dual_select" multiple>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option  value="4">4</option>
                            <option  value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                        </select>
                    </form>


                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h3>任务列表</h3>
                    <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>

                    <div class="input-group">
                        <input type="text" placeholder="添加新任务" class="input input-sm form-control" id="btn">
                        <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-white add"> <i class="fa fa-plus"></i> 添加</button>
                                </span>
                    </div>

                    <ul class="sortable-list connectList agile-list" id="list">
                        <li class="warning-element">
                            加强过程管理，及时统计教育经费使用情况，做到底码清楚，
                            <div class="agile-detail">
                                <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
                                <i class="fa fa-clock-o"></i> 2018.09.01
                            </div>
                        </li>
                        <li class="success-element">
                            支持财会人员的继续培训工作。
                            <div class="agile-detail">
                                <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                                <i class="fa fa-clock-o"></i> 2018.05.12
                            </div>
                        </li>
                        <li class="info-element">
                            协同教导处搞好助学金、减免教科书费的工作。
                            <div class="agile-detail">
                                <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                                <i class="fa fa-clock-o"></i> 2018.09.10
                            </div>
                        </li>
                        <li class="danger-element">
                            要求会计、出纳人员严格执行财务制度，遵守岗位职责，按时上报各种资料。
                            <div class="agile-detail">
                                <a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
                                <i class="fa fa-clock-o"></i> 2018.06.10
                            </div>
                        </li>
                        <li class="warning-element">
                            做好职工公费医疗工作，按时发放门诊费。
                            <div class="agile-detail">
                                <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
                                <i class="fa fa-clock-o"></i> 2018.09.09
                            </div>
                        </li>
                        <li class="warning-element">
                            有计划地把课本复习三至五遍。
                            <div class="agile-detail">
                                <a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
                                <i class="fa fa-clock-o"></i> 2018.08.04
                            </div>
                        </li>
                        <li class="success-element">
                            看一本高质量的高中语法书
                            <div class="agile-detail">
                                <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                                <i class="fa fa-clock-o"></i> 2018.05.12
                            </div>
                        </li>
                        <li class="info-element">
                            选择一份较好的英语报纸，通过阅读提高英语学习效果。
                            <div class="agile-detail">
                                <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                                <i class="fa fa-clock-o"></i> 2018.09.10
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-duallistbox-js" />
<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
<script type="text/javascript">
    var myDate = new Date;
    var year = myDate.getFullYear(); //获取当前年
    var mon = myDate.getMonth() + 1; //获取当前月
    var date = myDate.getDate(); //获取当前日
    var time = year + "." + mon + "." + date ;

    $('.dual_select').bootstrapDualListbox({
        nonSelectedListLabel: '右边',
        selectedListLabel: '左边',
        moveOnSelect: false,           // 出现一个剪头，表示可以一次选择一个
        infoText: '共{0}个',
        showFilterInputs: false,       // 是否带搜索
        selectorMinimalHeight: 210
    });
    $(document).ready(function () {
        $(".sortable-list").sortable({
            connectWith: ".connectList"

        })
        
    });
    $(".add").click(function () {
        if($("#btn").val()!=""){
            var html=' <li class="warning-element">\n' +
                $("#btn").val() +
                '<div class="agile-detail">\n' +
                '<a href="#" class="pull-right btn btn-xs btn-white">标签</a>\n' +
                '<i class="fa fa-clock-o"></i>' +time+
                '</div>\n' +
                '</li>';

            $("#list").prepend(html);
        }

    })
</script>

</body>
</html>